<template>
  <div>
    <customDialog
      :title="'在线播放'"
      :dialogVisible="dialogVisible"
      :showFoot="false"
      @close="dialogVisible = false"
      width="1000"
      top="10vh"
    >
      <div class="paly_box">
        <div class="left">
          <video
            autoplay
            :src="videoUrl"
            controls
            object-fit="contain"
            class="video"
          ></video>
        </div>
        <div class="right">
          <p class="title">
            <span>{{ movieName }}</span>
            <span @click="downLoad(videoUrl)" class="operationClick down">
              下载本集
            </span>
          </p>
          <div class="episodes">
            <span
              v-for="(item, index) in palyList"
              :class="[currentPlay === index + 1 ? 'active' : '']"
              :key="index"
              @click="handlePlay(index + 1)"
              >{{ index + 1 }}</span
            >
          </div>
        </div>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import { ref, reactive } from "vue";
import { listByMovieId, getEpisodeVideoUrl } from "@/api/episodeList/index";
const dialogVisible = ref(false);
const form = {
  libraryId: "",
  chargeEpisodeNo: "",
  unblockCoinAmount: "",
  movieId: 0,
};
const formData = ref(Object.assign({}, form));
const movieName = ref<string>("");
const palyList = ref([]);

const currentPlay = ref<number>(1);
const videoUrl = ref();

// 父级电子显示dialog
const showDialog = (val: any) => {
  dialogVisible.value = true;
  formData.value.movieId = val.id;
  movieName.value = val.name;
  currentPlay.value = 1;
  getMovieList();
};

// 播放视频
const handlePlay = (val: number) => {
  currentPlay.value = val;
  getMovieUrl();
};

// 下载本集
const downLoad = (url: string) => {
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  // 当请求加载完成时
  xhr.onload = function () {
    if (xhr.status === 200) {
      // 创建Blob对象用于存储文件内容
      var blob = new Blob([xhr.response]);

      // 使用ObjectURL来引用该Blob
      var objectUrl = URL.createObjectURL(blob);

      // 创建一个新的<a>标签用于触发下载
      var a = document.createElement("a");

      // 设置<a>标签的href属性和download属性
      a.href = objectUrl;
      a.download = `${movieName.value}-${currentPlay.value}.mp4`;

      // 添加到DOM，触发点击事件，然后删除
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);

      // 释放ObjectURL
      URL.revokeObjectURL(objectUrl);
    }
  };
  // 发送请求
  xhr.send();
};

// 获取播放视频
const getMovieUrl = () => {
  const params = {
    operaId: formData.value.movieId,
    episode: currentPlay.value,
  };
  getEpisodeVideoUrl(params).then((res: Record<string, any>) => {
    videoUrl.value = res?.url;
  });
};

// 获取播放列表
const getMovieList = () => {
  listByMovieId(formData.value.movieId).then((res: Record<string, any>) => {
    palyList.value = res.episodeNum;
    getMovieUrl();
  });
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.paly_box {
  display: flex;
  justify-content: center;
  width: 100%;

  .left {
    flex: 1;

    .video {
      width: 100%;
      height: 616px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  }

  .right {
    width: 457px;
    padding: 0 10px;
    margin-left: 20px;

    .title {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 20px;
      font-size: 18px;

      .down {
        font-size: 14px;
      }
    }

    .episodes {
      height: 524px;
      overflow-y: scroll;

      span {
        display: inline-block;
        width: 35px;
        height: 35px;
        padding: 0;
        margin: 0;
        margin-right: 8px;
        margin-bottom: 8px;
        line-height: 35px;
        color: #999;
        text-align: center;
        cursor: pointer;
        border: 1px solid #999;
        border-radius: 4px;
      }

      .active {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
      }
    }
  }
}
</style>
